<template>
	<view class="contain">
		<view class="containTop">
			<view class="">

			</view>
			<view class="containTopCenter">
				更改名字
			</view>
			<view class="containTopRight" @click="saveName">
				保存
			</view>
		</view>
		<view class="containCenter">
			<input v-model="userInfo.nickname" class="uni-input" focus />
		</view>
		<view class="containBottom">
			好名字可以让小伙伴更容易记住你
		</view>
	</view>
</template>

<script setup>
	import {
		getUserInfo,
		editUserInfo
	} from '@/api/my.js'
	import {
		ref,
		onMounted,
		reactive
	} from 'vue'
	const userInfo = reactive({
		nickname: '' //用户名
	})
	//获取用户信息
	onMounted(() => {
		// 在这里执行获取数据或初始化操作
		getUserInfo().then(res => {
			userInfo.nickname = res.data.nickname
		})
	});
	//保存名字
	const saveName = () => {
		editUserInfo(userInfo).then(res => {
			//提示用户
			uni.showToast({
				title: '修改成功',
				icon: 'none',
				duration: 2000
			})
		})
	}
</script>

<style lang="scss" scoped>
	.contain {
		width: 100%;
		height: 100vh;
		padding: 0 30rpx;

		.containTop {
			width: 100%;
			height: 100rpx;
			// background-color: pink;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.containTopCenter {
				font-weight: 600;
				font-size: 30rpx;
				margin-left: 50rpx;
			}

			.containTopRight {
				width: 100rpx;
				height: 40%;
				border-radius: 10rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-weight: 600;
				background-color: #0abe00;
			}
		}

		.containCenter {
			width: 100%;
			height: 60rpx;
			// background-color: skyblue;
			border-bottom: 1rpx solid gray;
			display: flex;
			align-items: center;
		}

		.containBottom {
			width: 100%;
			height: 50rpx;
			display: flex;
			align-items: center;
			color: gray;
		}
	}
</style>